<template>
  <div class="section-wrap">
          <div class="headerBox">
        <div class="header">
            <x-icon type="ios-arrow-left" size="" class="icon-white" @click="goBack"></x-icon>违章通知单详情
        </div>
        </div>
    <div class="form-section" style="margin-top: 40px;">
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>项目名称</label>
        </div>
        <div>
          <p>{{data.projectname}}</p>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>建设管理单位</label>
        </div>
        <p>{{data.panrentDepartName}}</p>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>业主项目经理</label>
        </div>
        <div>
          <p>{{data.projectleader}}</p>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>违章时间</label>
        </div>
        <div>
          <p>{{data.weizDate.substring(0,10)}}</p>
        </div>
      </div>
    </div>
    <div class="form-section">
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>通知书接收单位</label>
        </div>
        <div class="input_div">
          <input type="text"
                 v-model="data.receivedeparname"
                 :disabled="isDisabled"/>
          <x-icon type="ios-arrow-right" size="22" class="icon-right"></x-icon>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>记分通知书编号</label>
        </div>
        <p>{{data.noticenumber}}</p>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>是否记分</label>
        </div>
        <p>{{data.isjifen}}</p>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>违章现象编号</label>
        </div>
        <div>
          <p>{{data.weiznumber}}</p>
        </div>
      </div>
    </div>
    <div class="form-section">
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>被记分单位</label>
        </div>
          <div class="input_div">
            <p>{{data.coverjifendepart}}</p>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>单位记分</label>
        </div>
          <div class="input_div">
            <p>{{data.jifendepart}}</p>
        </div>
      </div>
      <div class="form-item form-item-style1" @click="getUser(2)">
        <div class="label-title">
          <label>被记分人员</label>
        </div>
        <div class="input_div">
          <p>{{data.coverjifenperson}}</p>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>被记分人员岗位</label>
        </div>
        <div class="input_div">
          {{data.coverjifenstation}}
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>人员记分</label>
        </div>
        <div class="input_div">
          <p>{{data.personjifen}}</p>
        </div>
      </div>
    </div>
    <div class="form-section">
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>违章整改责任人</label>
        </div>
        <div class="input_div">
          <input type="text"
                 v-model="data.weizrectifyperson"
                 :disabled="isDisabled"/>
          <x-icon type="ios-arrow-right" size="22" class="icon-right"></x-icon>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>整改开始时间</label>
        </div>
        <group>
          <datetime v-model="data.weizrectifystartdate.substring(0,10)"></datetime>
        </group>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>整改结束时间</label>
        </div>
        <group>
          <datetime v-model="data.weizrectifyenddate.substring(0,10)"></datetime>
        </group>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>整改验收单位</label>
        </div>
        <div class="input_div">
          <input type="text"
                 v-model="data.panrentDepartName"
                 :disabled="isDisabled"/>
          <x-icon type="ios-arrow-right" size="22" class="icon-right"></x-icon>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>通知书抄送人</label>
        </div>
        <div class="input_div">
          <input type="text"
                 v-model="data.coverjifenperson"
                 :disabled="isDisabled"/>
          <x-icon type="ios-arrow-right" size="22" class="icon-right"></x-icon>
        </div>
      </div>
    </div>
    <ul class="details_list">
      <li>
        <div>
          <h3>
            <span>违章现象：{{data.weizRemark.split(',').length}}项</span>
            <x-icon type="ios-arrow-up"
                    size="22"
                    class="icon-up"></x-icon>
          </h3>
        </div>
        <ul class="list_2">
          <li v-for="rectify in data.weizRemark.split(',')">
            <div>
             {{rectify}}
            </div>
          </li>
        </ul>
      <!--  <ul class="list_2">
          <li>
            <div>
              <span class="checkbox active"></span>未回执现场安全标志布置图
              <x-icon type="ios-arrow-down"
                      size="22"
                      class="icon-down"></x-icon>
            </div>
            <ul class="list_3">
              <li>
                <span class="checkbox active"></span>临时用电
                <x-icon type="ios-arrow-right"
                        size="22"
                        class="icon-right"></x-icon>
              </li>
              <li>
                <span class="checkbox active"></span>消防
                <x-icon type="ios-arrow-right"
                        size="22"
                        class="icon-right"></x-icon>
              </li>
              <li>
                <span class="checkbox active"></span>高处作业
                <x-icon type="ios-arrow-right"
                        size="22"
                        class="icon-right"></x-icon>
              </li>
            </ul>
          </li>
          <li>
            <div>
              <span class="checkbox active"></span>休息区未设置工棚
              <x-icon type="ios-arrow-up"
                      size="22"
                      class="icon-up"></x-icon>
            </div>
            <ul class="list_3">
              <li>
                <span class="checkbox active"></span>高处作业
                <x-icon type="ios-arrow-right"
                        size="22"
                        class="icon-right"></x-icon>
              </li>
            </ul>
          </li>
        </ul>-->
      </li>
    </ul>
    <div class="form-section">
      <h3>
        <span>附加信息</span>
      </h3>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>通知书下法人</label>
        </div>
        <div>
          <p>{{data.noticexfperson}}</p>
        </div>
      </div>
      <div class="form-item form-item-style1">
        <div class="label-title">
          <label>通知书下发时间</label>
        </div>
        <div>
          <p>{{data.noticesendtime.substring(0,10)}}</p>
        </div>
      </div>
      <!--<div class="btns">
        &lt;!&ndash; <button>保存</button> &ndash;&gt;
        <button @click="handleSubmit"
                class="green width200">提交
        </button>
      </div>-->
    </div>
    <div v-transfer-dom>
      <popup v-model="classValue" width="100%">
        <select-depart @nodeClick='selectedDepart'></select-depart>
      </popup>
      <popup v-model="classValue1" width="100%">
        <select-user @selectUser='selectUser'></select-user>
      </popup>
    </div>
  </div>
</template>
<script>
  import upload from '@/commonComponents/upload/index'
  import selectDepart from "@commonComponents/selectDepart/selectDepart";
  import formatDate from "../../utils/formatDate";
  import selectUser from "@commonComponents/selectUser/selectUser";
  import {
    XHeader,
    Tabbar,
    TabbarItem,
    Group,
    Cell,
    TransferDom,
    Popup
  } from "vux";

  export default {
    directives: {
      TransferDom
    },
    name: 'brankAbarbeitung',
    data() {
      return {
        ids:[],
        isDisabled: false,
        classValue: false,
        addFlag:true,
        classValue1: false,
        selectDepartType: 0,
        selectUserType: 0,
        accopt: [['单位一', '单位二']],//通知书接收单位
        accoptVal: ['单位一'],
        isjifen: [],
        accopt1: [['是', '否']],
        imgList: ['http://www.bosafe.com/web_images/bossien-%E5%8D%9A%E6%99%9F%E5%86%85%E7%BD%91.jpg'],
        data: {
          rectifyList:[]
        },
        dataList:[]
      }
    },
    components: {
      upload,
      Popup,
      selectDepart,
      formatDate,
      selectUser
    },
    created() {
      this.getNotice()
    },
    methods: {
      goBack(){
        this.$router.go(-1)
      },
      getNotice() {
        let id=this.$route.query.id
        this.$axiosAjax.getNotice({id: id}).then((res) => {
          if (res.data.success == true) {
            this.data = res.data.result
            this.ids=this.data.weiznumber.split(",")
          }

        }).catch(
          (err) => {

          }
        )
      },
      getCompany(type) {
        this.classValue = true;
        this.selectDepartType = type;
      },
      getUser(type) {
        this.classValue1 = true;
        this.selectUserType = type;
      },
      selectedDepart(data) {
        if (this.selectDepartType == 0) {
          this.data.receivedeparid = data.id;
          this.data.receivedeparname = data.departName;
        } else {
          this.data.panrentDepartId = data.id;
          this.data.panrentDepartName = data.departName;
        }
        this.classValue = false;
      },
      selectUser(data) {
        if (this.selectUserType == 0) {
          this.data.weizrectifyperson = data.userName
        } else {
          this.data.coverjifenperson = data.userName
        }
        this.classValue1 = false
      },
      handleSubmit() {
        if (!this.addFlag) {
          return false;
        }
        if(this.isjifen.length<=0){
          this.$vux.toast.text("是否记分不能为空")
          return;
        }
        if(this.dataList.length<=0){
          this.$vux.toast.text("违章现象不能为空")
          return;
        }
        this.data.isjifen=this.isjifen[0],
        this.data.rocordId = this.$route.query.recordId
        this.data.rectifyList=this.dataList
        this.data.weiztype=this.$route.query.name;
        console.log(JSON.stringify(this.data))
        this.$axiosAjax.createNotice(this.data).then((res) => {
          if (res.data.success == true) {
            this.$vux.toast.text("下发成功")
            this.addFlag = false
          } else {
            this.addFlag = true
          }
        }).catch(
          (err) => {
            this.$vux.toast.text("下发失败")
            this.addFlag = true
          }
        )

      },
      addweiznum(weinum,obj) {
        if (this.ids.indexOf(weinum) >= 0) {
          this.ids.splice(this.ids.indexOf(weinum), 1)
          this.dataList.some((item,i)=>{
            if(item.weiznum == weinum){
              this.dataList.splice(i,1)
              return true;
            }
          })
        } else {
          this.ids.push(weinum)
          this.dataList.push(obj)
        }
      },
    }
  }
</script>
<style lang="less" scoped>
  .details_list {
    background: #fff;
    margin-bottom: 10px;
    h3 {
      span {
        color: #226afd;
      }
    }
    .vux-x-icon {
      fill: #999;
      float: right;
      margin-top: 16px;
    }
    li {
      > div {
        height: 54px;
        line-height: 54px;
        padding-right: 20px;
      }
      .checkbox {
        display: inline-block;
        width: 16px;
        height: 16px;
        background: url(../../../static/images/checkbox.png) no-repeat center;
        background-size: cover;
        margin-right: 10px;
        &.active {
          background: url(../../../static/images/checked.png) no-repeat center;
          background-size: cover;
        }
      }
    }
    > li {
      justify-content: space-between;
      padding-left: 20px;
      // border-bottom: 5px solid #ebeef2;
      > div {
        font-weight: bold;
        font-size: 16px;
        border-top: 1px solid #ebeef2;
      }
      .list_2 {
        li {
          border-top: 1px solid #ebeef2;
          > div {
            font-weight: bold;
            font-size: 14px;
          }
        }
      }
      .list_3 {
        li {
          font-size: 14px;
          text-indent: 2em;
          height: 55px;
          line-height: 54px;
          border-top: 1px solid #ebeef2;
          padding-right: 20px;
        }
      }
    }
  }
</style>


